<template>
  <div>
    <div class="search-con search-con-top">
      名称：
      <Input v-model="searchData.name" style="width: 200px"></Input>
      <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px">搜索</Button>
      <Button @click="reset()" style="margin-left: 10px;">重置</Button>
      <Button slot="extra" @click="showDrawer(false)" type="warning" style="margin-left: 10px">添加</Button>
    </div>
    <br />
    <Table :columns="columns" :data="list" @on-sort-change="customSort" :highlight-row="true" max-height="800" border
      stripe>
      <template slot-scope="{ row, index }" slot="memberSlot">
        <Tooltip content="编辑" style="margin-left: 10px" placement="top">
          <Icon type="ios-create" size="24" color="#2d8cf0" style="cursor: pointer" @click="showDrawer(row)" />
        </Tooltip>
        <Tooltip content="删除" style="margin-left: 10px" placement="top">
          <Icon type="md-trash" size="24" color="#ed4014" style="cursor: pointer" @click.stop="del(row.id)" />
        </Tooltip>
        <Tooltip content="触发记录" style="margin-left: 10px" placement="top">
          <Icon type="ios-paper-outline" size="24" color="#19be6b" style="cursor: pointer"
            @click="showDesignList(row.id)" />
        </Tooltip>
      </template>
    </Table>

    <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
    </Paginate>
    <Drawer :title="itemInfo.id == 0 ? '添加' : '编辑'" :closable="false" width="40" v-model="showAdd">
      <Form ref="formValidate" :model="itemInfo" :label-width="100">
        <FormItem label="关键词">
          <Input v-model="itemInfo.name" placeholder=""></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submit">提交</Button>
        </FormItem>
      </Form>
    </Drawer>

    <!-- 设计师列表 -->
    <Modal v-model="designListModal" title="触发记录" :width="40">
      <Table :columns="columns1" :data="list1" size="small" :highlight-row="true" max-height="800" border stripe>
      </Table>
      <Paginate :total="total1" @on-change="changePage1" @on-page-size-change="changeSize1">
      </Paginate>
    </Modal>
  </div>
</template>

<script>
import config from "@/config";
import Paginate from "@/components/paginate/paginate.vue";
import { getToken } from "../../libs/util";
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
const baseImgeUrl =
  process.env.NODE_ENV === "development"
    ? config.baseImgUrl.dev
    : config.baseImgUrl.pro;
export default {
  name: "wordList",
  components: {
    Paginate,
  },
  data() {
    return {
      baseImgeUrl: baseImgeUrl,
      action_url: baseUrl + "/admin/image/uploadImg",
      header: { Authorization: getToken() },
      imgUrl: "",
      // 列表
      columns: [
        {
          title: "ID",
          align: "center",
          key: "id",
          sortable: "custom",
        },
        {
          title: "名称",
          align: "center",
          key: "name",
          sortable: "custom",
        },
        {
          title: "触发次数",
          align: "center",
          key: "count",
        },
        {
          title: "创建时间",
          align: "center",
          key: "create_time",
          sortable: "custom",
        },
        {
          title: "操作",
          align: "center",
          key: "make",
          slot: "memberSlot",
          minWidth: 100,
        },
      ],
      // 数据
      list: [],
      total: 0,
      searchData: {
        page: 1,
        limit: 10,
      },
      showAdd: false,
      itemInfo: {},
      // 设计师列表
      searchData1: {
        id: 0,
        page: 1,
        limit: 10,
      },
      columns1: [
        {
          title: "ID",
          align: "center",
          key: "id",
          sortable: "custom",
        },
        {
          title: "名称",
          align: "center",
          key: "user_name",
          sortable: "custom",
        },
        {
          title: "角色",
          align: "center",
          key: "role_name",
          sortable: "custom",
        },
        {
          title: "触发次数",
          align: "center",
          key: "count",
        },
        {
          title: "触发时间",
          align: "center",
          key: "create_time",
          sortable: "custom",
        },
      ],
      list1: [],
      total1: 0,
      designListModal: false,
    };
  },
  methods: {
    getList() {
      const param = {
        ...this.searchData,
      };
      this.$axios("/admin/word/getList", param).then((res) => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      this.searchData = {
        page: 1,
        limit: 10,
      };
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData1.limit = size;
      this.getDesignList();
    },
    changePage1(page) {
      this.searchData1.page = page;
      this.getDesignList();
    },
    changeSize1(size) {
      this.searchData.limit = size;
      this.getList();
    },
    customSort(column, key, order) {
      this.searchData.order_by = column.key;
      this.searchData.sort = column.order;
      this.getList();
    },
    // 显示添加角色弹窗
    showDrawer(row) {
      // this.getCategoryArr();
      if (row) {
        this.itemInfo.id = row.id;
        this.itemInfo.name = row.name;
      } else {
        this.itemInfo = {
          id: 0,
          name: "",
        };
      }
      this.showAdd = true;
    },
    // 添加角色
    submit() {
      this.$axios("/admin/word/save", this.itemInfo).then((res) => {
        this.$Message.success("保存成功");
        this.showAdd = false;
        this.getList();
      });
    },
    handleSuccess(res, file) {
      this.itemInfo.img = res.data;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式错误",
        desc: "不支持该文件类型",
      });
    },
    del(id) {
      this.$axios("/admin/word/del", { id: id }).then((res) => {
        this.$Message.success("删除成功");
        this.getList();
      });
    },
    showDesignList(id) {
      this.searchData1.id = id;
      this.getDesignList();
      this.designListModal = true;
    },
    getDesignList() {
      this.$axios("/admin/word/getTriggerRecord", this.searchData1).then(
        (res) => {
          this.list1 = res.data;
          this.total1 = res.total1;
        }
      );
    },
  },
  created() {
    // 查询自己管理员
    this.getList();
  },
};
</script>
